<template>
  <div>
    <h2>级联选择器</h2>
    <p style="margin-bottom: 50px"> 对element-ui cascader二次封装 封装数据源,支持url</p>

    <el-divider content-position="left">基础用法</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-cascader
            url="/static/json/tree.json"
          ></es-cascader>
        </div>

        <div class="demo-item" style="width: 350px;">
          <es-cascader
            v-model="value"
            url="/static/json/tree.json"
          ></es-cascader>
        </div>

      </div>
      <div class="meta">
        <div class="description">

        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-cascader
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;url="<span class="attr">/static/json/dict.json</span>"
            <br>> &lt;/es-cascader>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">数据返回格式</el-divider>
    <div class="demo-block">
      <div class="source">
        <span class="attr">code</span>&nbsp;&nbsp;200成功 其他失败
        <br><span class="attr"> msg</span>&nbsp;&nbsp;附带消息 请求失败时弹出msg中的消息
        <br><span class="attr">data</span>&nbsp;&nbsp;返回的数据放在data中
      </div>
      <div class="meta">
        <div class="hljs highlight">
          <code>
            {
            <br>&nbsp;&nbsp;"code":200,
            <br>&nbsp;&nbsp;"msg":"success"
            <br>&nbsp;&nbsp;"data":[
            <br>&nbsp;&nbsp;&nbsp;&nbsp;{
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":"1",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":"级联选择-1",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;children: [{
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":"2",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label: '级联选择-2'
            <br>&nbsp;&nbsp;&nbsp;&nbsp;}]}
            <br>&nbsp;&nbsp;]
            <br>}
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">Attributes</el-divider>
    <div class="demo-block demo-table">
      <demo-table :table-data="tableData"></demo-table>
    </div>

  </div>
</template>

<script>
  import DemoTable from '../../components/module/demo-table'

  export default {
    name: 'zwTreeDemo',
    components: {DemoTable},
    data () {
      return {
        showId: 0,
        value: [2, 24],
        value1: [2, 3],
        value2: [1,2,3,4],
        value4: 2,
        tableData: [
          {
            param: 'v-model',
            remark: '多个值数组',
            type: 'string/number/Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'url',
            remark: '数据源地址url',
            type: 'string',
            usable: '—',
            default: '—'
          },

        ]
      }
    },
    methods: {
      showCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'block'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[6].style.display = 'block'
      },
      hideCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'none'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[4].style.display = 'block'
      },
    }
  }
</script>

<style scoped>
  .demo-block {

  }
</style>
